<template>
  <div class="Association">
    <!-- Form -->
    <el-button class="relation" type="text" @click="openDialog()">关联设备</el-button>

    <el-dialog title="关联设备" :visible.sync="dialogFormVisible">
      <el-form :inline="true" :model="getEquipList">
        <el-form-item label="出厂编号:" label-width="75">
          <el-input v-model="getEquipList.data.condition.equip_cid" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称:" label-width="75">
          <el-select class="equipSelect" v-model="getEquipList.data.condition.name" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in nameData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型:" label-width="45">
          <el-select class="equipSelect" v-model="getEquipList.data.condition.type" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="bottonQuery" type="primary" @click="getEquip()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="allEquipData" stripe fit highlight-current-row
                style="width: 100%;" height="541" :header-cell-style="{background:'#F7F8F9'}" @selection-change="equipChangeFun">
        <el-table-column
          type="selection"
          width="45"
          align="center"
          @selection-change="equipChangeFun">
        </el-table-column>
        <el-table-column
          prop="equip_cid"
          label="出厂编号"
          sortable
          width="150">
        </el-table-column>
        <el-table-column
          prop="name_label"
          label="设备名称"
          width="235">
        </el-table-column>
        <el-table-column
          prop="type_label"
          label="类型"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="brand_label"
          label="品牌"
          width="190">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="174">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="clears" @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="selectionDevice()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    props: ['noNeedShow'],
    data() {
      return {
        total: 0,
        templateRadio: [],
        allEquipData: [],
        options: [],
        nameData: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        search: {
          pid: '',
          name: '',
          type: '',
          model: ''
        },
        currentPage4: 4,
        getEquipType: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        getEquipList: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_manage_condition',
          data: {
            condition: {
              cid: '',
              cids: [],
              cid_filter: [],
              name: '',
              brand: '',
              model: '',
              equip_class: '',
              annual_trial_remind: 0,
              type: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        getEquipName: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_name'
        }
      }
    },
    methods: {
      openDialog() {
        this.dialogFormVisible = true
        this.getEquip()
      },
      getEquip() {
        this.getEquipList.data.condition.cid_filter = []
        this.getEquipList.data.condition.cid_filter.push(this.noNeedShow)
        axios.post('/equipmanage', this.getEquipList, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.allEquipData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch((error) => {
            console.log(error)
          })
        axios.post('/basicdata', this.getEquipType, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.datas
        })
          .catch((error) => {
            console.log(error)
          })
        axios.post('/basicdata', this.getEquipName, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.nameData = res.data.datas
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.getEquipList.data.page.page_number = (val) + ''
        this.getEquip()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.getEquipList.data.page.page_size = (pageSize) + ''
        this.getEquip()
      },
      equipChangeFun(val) {
        this.templateRadio = val
      },
      selectionDevice() {
        if (this.templateRadio.length === 0) {
          this.$message.error('请勾选一个设备')
        } else if (this.templateRadio.length > 1) {
          this.$message.error('只允许选择一个设备')
        } else {
          this.$emit('equipOnly', this.templateRadio)
          this.dialogFormVisible = false
        }
      }
    }
  }
</script>
<style scoped="">
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .clears{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
  /deep/ .bottonQuery {
    margin-top: 6px;
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .bottonConfirm {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .el-dialog {
    border-radius: 5px;
    width: 1050px;
  }
  /deep/ .el-dialog__header {
    background: #E3E6EE;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 9px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
    height: 665px;
  }
  /deep/ .el-dialog__footer {
    height: 50px;
    border-top: 1px solid #DCDFE6;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border {
    margin-top: 20px;
    height: 500px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    padding: 0px;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 13px 0px;
    font-weight: normal;
  }
  /deep/ .block {
    margin-top: 5px;
    height:15px;
  }
  /deep/ .el-pagination {
    float: right;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    color: #fff;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .gutter {
    background: #D8DEE8;
  }
</style>
